<template>
    <div class="appointment-scheduling">
        <div class="header-box">
            <div class="header-left">
                <!-- <div class="back">
                    <i class="el-icon-arrow-left" @click="backFun"></i>
                </div> -->
                <div class="title">预约排班</div>
            </div>
        </div>
        <div class="scheduling-info comm-list">
            <!-- 服务人和时间信息 -->
            <appointmentTiem
                :page_i="page_i"
                ref="appointmentTiem"
            ></appointmentTiem>
        </div>

        <div class="but-box">
            <div class="but avt" @click="submitScheduling">
                <span>提交排班</span>
            </div>
        </div>
    </div>
</template>

<script>
import appointmentTiem from "./appointmentTiem.vue";
import config from "@/js/conf/Config.js";

export default {
    name: "appointmentScheduling",
    components: { appointmentTiem },
    props: ["page_i"],
    data() {
        return {};
    },
    methods: {
        initData() {
            this.$refs.appointmentTiem.initData();
        },
        async submitScheduling() {
            let param = {
                day_time: this.getDayTime(),
                staffids: this.getStaffids(),
            };

            if (param.staffids.length == 0) {
                this.$msg({ title: "请选择服务人" });
                return;
            }
            let url = config.YY_YUYUE_DUTY_SAVE;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                this.$msg({ title: "提交成功" });
                this.backFun();
                setTimeout(() => {
                    this.initData();
                }, 2000);
            }
        },
        getDayTime() {
            let data = this.$refs.appointmentTiem.hourList;
            let timestr = this.$refs.appointmentTiem.timestrList;
            let day_time = [];
            if (timestr.length == 0) {
                this.$msg({ title: "请选择日期" });
                return;
            }
            if (data.length == 0) {
                this.$msg({ title: "请选择时间" });
                return;
            }
            timestr.map((v) => {
                if (v.is_acitve) {
                    day_time.push({
                        hour: [],
                        timestr: v.timestr,
                    });
                }
            });

            data.map((v) => {
                if (v.is_acitve) {
                    day_time.map((vs) => {
                        vs.hour.push(v.hour);
                    });
                }
            });

            return day_time;
        },
        getStaffids() {
            let data = this.$refs.appointmentTiem.serviceData;
            let staffids = [];
            if (data.length > 0) {
                data.map((v) => {
                    staffids.push(v.id);
                });
            }
            return staffids;
        },
        // 返回
        backFun() {
            this.$emit("backFun");
        },
    },
};
</script>

<style lang="scss" scoped>
.appointment-scheduling {
    height: 100vh;
    margin-left: 0;
    width: 100%;
    background-color: #fff;
    position: relative;
    .scheduling-info {
        height: calc(100% - 130px);
        padding: 10px;
        overflow: auto;
    }
    .header-box {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px #e8dcdc solid;
        padding: 0 10px;
        padding-right: 20px;
        display: flex;
        .header-left {
            display: flex;
            .back {
                font-size: 20px;
                margin-right: 10px;
                cursor: pointer;
            }
            .title {
                font-size: 18px;
            }
        }
    }
    .but-box {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 60px;
        width: 100%;
        border-top: 1px #e8dcdc solid;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .but {
            height: 100%;
            padding: 0 20px;
            font-size: 16px;
            display: flex;
            align-items: center;
            cursor: pointer;
            &.avt {
                background: #3388ff;
                color: #fff;
                &:hover {
                    background: #5498f7;
                }
            }
        }
    }
}
</style>